<template>
  <div class="body-bg">
  <n-empty description="友链" class="--empty-ptb-40">
    <template #icon>
      <n-icon :size="40" color="#909399">
        <IconTutorial />
      </n-icon>
    </template>
  </n-empty>
  <el-card class="order-container">
    <el-row :gutter="12">
      <el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>苍蓝境界官网: </span> <a href="http://cljj.biubiuyouxi.com"  target="_blank">http://cljj.biubiuyouxi.com</a>
        </div>
      </template>
      <div>   
        苍蓝境界手游唯一指定官网平台
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>TAP: </span> <a href="https://www.taptap.cn/app/41765"  target="_blank">https://www.taptap.cn/app/41765</a>
        </div>
      </template>
      <div>   
        国内游戏平台，每日发现好游戏，一键下载苍蓝境界
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>苍蓝境界Wiki【bili】: </span> <a href="https://wiki.biligame.com/cljj"  target="_blank">https://wiki.biligame.com/cljj</a>
        </div>
      </template>
      <div>   
        由棉花糖启动的B站板块苍蓝wiki，旨在给玩家的游戏旅程带来便利
      </div>
    </el-card>    
</el-col>
 <el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>百度: </span> <a href="https://www.baidu.com"  target="_blank">https://www.baidu.com</a>
        </div>
      </template>
      <div>
        国内搜索引擎之一
      </div>
    </el-card>
</el-col>
 <el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>哔哩哔哩: </span> <a href="https://www.bilibili.com"  target="_blank">https://www.bilibili.com</a>
        </div>
      </template>
      <div>
          中国年轻世代高度聚集的文化社区和视频平台
      </div>
    </el-card>
</el-col>
 <el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>网易云: </span> <a href="https://music.163.com"  target="_blank">https://music.163.com</a>
        </div>
      </template>
      <div>
          wiki音乐与网易云实现的联动，发现更多好音乐
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>GitHub: </span> <a href="https://github.com"  target="_blank">https://github.com</a>
        </div>
      </template>
      <div>   
        GitHub是一个面向开源及私有软件项目的托管平台
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>Gitee: </span> <a href="https://gitee.com"  target="_blank">https://gitee.com</a>
        </div>
      </template>
      <div>   
        国内代码托管平台，类似GitHub
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>CSDN: </span> <a href="https://www.csdn.net"  target="_blank">https://www.csdn.net</a>
        </div>
      </template>
      <div>   
        国内非常受欢迎的专业IT社区
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>百度云: </span> <a href="https://cloud.baidu.com"  target="_blank">https://cloud.baidu.com</a>
        </div>
      </template>
      <div>   
        百度推出的一项云存储服务
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>腾讯云: </span> <a href="https://cloud.tencent.com"  target="_blank">https://cloud.tencent.com</a>
        </div>
      </template>
      <div>   
        腾讯公司旗下的产品，为开发者提供云服务、云数据一站式服务方案
      </div>
    </el-card>    
</el-col>
<el-col :span="8">
    <el-card class="data-item interval" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>阿里云: </span> <a href="https://account.aliyun.com"  target="_blank">https://account.aliyun.com</a>
        </div>
      </template>
      <div>   
        阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技
      </div>
    </el-card>    
</el-col>


</el-row>
  </el-card>


  </div>
 
</template>

<script lang='ts'>
import { defineComponent, onMounted } from 'vue'
import { useMessage } from 'naive-ui'
import { IconTutorial } from '@/icons'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'MyError',
  components: {
    IconTutorial,
  },
  setup() {
    const nMessage = useMessage()
    const router = useRouter()
    onMounted(() => {
    
    })

     // 记录pvuv
    const toLinkUrl = (url) => {
        // window.location.href = url
        window.open(url,"_blank"); 
    }

    return {
      toLinkUrl
    }
  },

})
</script>
<style>
	.el-card.active {
		 margin: 10px;
	}

      .interval {
        margin: 10px;
      }


</style>
